<template>
<view>
	<uni-card v-if="!perView" :is-shadow="false">
		<uni-section title="开始时间">
			<timSelect showType="date" @btnConfirm="setstartTime" @btnCancel="cancelChange">
				<uni-easyinput :clearable="false" v-model="form.startTime" placeholder="请选择开始时间" />
				<view style="position: absolute;width: 100%;height: 37px;margin-top: -37px;z-index: 80;"></view>
			</timSelect>
		</uni-section>
		<uni-section title="结束时间">
			<timSelect showType="date" @btnConfirm="setstopTime" @btnCancel="cancelChange">
				<uni-easyinput :clearable="false" v-model="form.stopTime" placeholder="请选择结束时间" />
				<view style="position: absolute;width: 100%;height: 37px;margin-top: -37px;z-index: 80;"></view>
			</timSelect>
		</uni-section>
		<uni-section title="附件">
			<button size="mini" type="primary" style="width: 100%;background-color: #0081ff; color: #FFF;" @click="uploadImage">点击上传</button>
			<scroll-view style="height: 170rpx;width: 100%; white-space: nowrap;margin-top: 10px;" scroll-x="true" >
				<view v-for="(item, index) in fileList" :key="index" style="width: 170rpx; height: 170rpx;margin-right: 10px;float: left;">
					<image v-if="fileSuffixType(item) == 'image'" :src="item" @click="swClick(fileList, index)" @longtap="longtapClick(index)"  class="rounded-1  mr-1" style="width: 100%;height: 100%;"></image>
					<image v-if="fileSuffixType(item) != 'image'" src="../../static/annex.png" @click="swClick(fileList, index)" @longtap="longtapClick(index)"  class="rounded-1  mr-1" style="width: 100%;height: 100%;"></image>
				</view>
			</scroll-view>
			<span style="font-size: 12px;">长按可删除</span>
		</uni-section>
	</uni-card>
	<uni-card :is-shadow="false">
		<uni-section title="操作" type="line">
			<button size="mini" type="primary" style="width: 100%;background-color: #0081ff; color: #FFF;" @click="submit">提交</button>
		</uni-section>
	</uni-card>
	<view v-if="perView">
		<view class="mask">
			<view @click="guanClick()" style="font-size: 30px;bottom: 40px;position: absolute;">
				<uni-icons type="closeempty" size="30" color="#FFF"></uni-icons>
			</view>
			<swiper @change="changeSwiper" class="my_swiper" :current="current" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay" :duration="duration">
				<swiper-item v-for="(x, y) in imageList" :key="y">
					<view class="bg_img" :style="{ backgroundImage: 'url('+x+')'}"></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="page" v-if="imageList.length>0">{{ current + 1 }} / {{ imageList.length }}</view>
	</view>
</view>
</template>

<script>
import {uploadFile} from "@/api/bicu.js"
import {addInspect} from "@/api/system/uniapp.js"
import {matchFileSuffixType} from "@/utils/fileSuffixTypeUtil.js"
import timSelect from "@/components/wing-time-selector.vue"

export default {
		components:{
			timSelect,
		},
		data() {
			return {
				perView: false,
				circular: true,
				indicatorDots: false,
				autoplay: false,
				duration: 500,
				fileList: [],
				imageList: [],
				current: 0,
				form: {
					startTime: null,
					stopTime: null,
					siteNumber: null,
					url: null,
				},
			}
		},
		onLoad: function() {
			this.form.siteNumber = uni.getStorageSync('siteNumber');
		},
		methods: {
			setstartTime(time){
				this.form.startTime = time.key
				this.form.stopTime = this.getdatatime(new Date(time.key).getTime() + 3600 * 1000 * 24 * 180)
			},
			setstopTime(time){
				this.form.stopTime = time.key
			},
			cancelChange(){},
			swClick(list, index){
				if(list != undefined){
					this.current = index;
					this.imageList = list;
					this.perView = true;
				}
			},
			guanClick(guan){
				this.perView = false;
			},
			changeSwiper(e) {
				this.current = e.target.current;
			},
			submit(){
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				this.form.url = this.fileList.join()
				addInspect(this.form).then(res => {
					if(res.code == 200){
						uni.showToast({
							title: "上报成功!",
							icon: "success",
							position: 'bottom'
						})
						uni.$emit('addInspect',this.form)
						setTimeout(() => {
							uni.navigateBack({delta: 1})
						}, 500)
					}
				})
			},
			fileSuffixType(url){
				return matchFileSuffixType(url)
			},
			uploadImage() {
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '文档'],
					success: res => {
						if (res.tapIndex == 0) {
							this.chooseImages();
						} else {
							this.chooseFile();
						}
					}
				});
				
			},
			chooseImages(){
				var that = this
				uni.chooseImage({
					//允许上传的照片数量
					count: 9,
					 // sizeType:  original 原图，compressed 压缩图，默认二者都有
					sizeType: ['original'],
					// sourceType: ['camera','album'], 从相册选择
					sourceType: ['album', 'camera'],
					success: (res) => {
						//因为有一张图片， 输出下标[0]， 直接输出地址
						let data = []
						res.tempFilePaths.forEach(item => {
							data.push({name: 'file', filePath: item})
						})
						for (var i = 0;i < data.length;i ++) {
							uploadFile(data[i]).then(res => {
								that.fileList.push(res.url);
							})
						}
					},
					fail: (err) => {
						// #ifdef MP
						//getSetting 获取用户的当前设置， 判断是否已授权,
						uni.getSetting({
							success: (res) => {
							//用户授权结果，其中 key 为 scope 值，value 为 Boolean 值，表示用户是否允许授权
								let authStatus = res.authSetting['scope.album'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: '系统需要从您的相册和相机的权限，请在设置界面打开相关权限',
										success: (res) => {
										//确认按钮框
											if (res.confirm) {
											//调起客户端小程序设置界面，返回用户设置的操作结果。
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
			chooseFile(){
				var that = this
				wx.chooseMessageFile({
					count: 9,
					extension:['.doc','.docx','.xls','.xlsx'],
					success: (res) => {
						console.log("res", res.tempFiles.path)
						let data = []
						res.tempFiles.forEach(item => {
							data.push({name: 'file', filePath: item.path})
						})
						for (var i = 0;i < data.length;i ++) {
							uploadFile(data[i]).then(res => {
								that.fileList.push(res.url);
							})
						}
					},
					fail: (err) => {
						// #ifdef MP
						//getSetting 获取用户的当前设置， 判断是否已授权,
						uni.getSetting({
							success: (res) => {
							//用户授权结果，其中 key 为 scope 值，value 为 Boolean 值，表示用户是否允许授权
								let authStatus = res.authSetting['scope.album'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: '系统需要从您的相册和相机的权限，请在设置界面打开相关权限',
										success: (res) => {
										//确认按钮框
											if (res.confirm) {
											//调起客户端小程序设置界面，返回用户设置的操作结果。
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
			getdatatime(time, type) {
				if(typeof time == 'string'){
					time = time.replace(/-/g, '/');
				}
				const dt = new Date(time);
				const y = dt.getFullYear();
				const m = (dt.getMonth() + 1 + "").padStart(2, "0");
				const d = (dt.getDate() + "").padStart(2, "0");
				return `${y}-${m}-${d}`;
			}
		}
	}
</script>

<style lang="scss">
.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
	z-index: 5;
	> .my_swiper {
		width: 100%;
		height: 75vh;
		.bg_img {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position:center;
			width: 100%;
			height: 100%;
		}
	}
}
</style>
